<!DOCTYPE html>
<html>
    <head>
        <title>1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
        收集表单数据：
        若：<inputtype="text"/>，则v-model收集的是value值，用户输入的就是value值。
        若：<inputtype="radio"/>，则v-model收集的是value值，且要给标签配置value值。
        若：<input type="checkbox"/>
        1.没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值）
        2.配置input的value属性：
        （1）v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值）
        (2)v-model的初始值是数组，那么收集的的就是value组成的数组
        备注：V-model的三个修饰符：
        lazy：失去焦点再收集数据
        number：输入字符申转为有效的数字
        trim：输入首尾空格过滤
        -->
        <div id="root">
            <form @submit.prevent="demo">
                账号<input type="text" v-model.trim="userInfo.account"><br/>
                密码<input type="password" v-model="userInfo.password"><br/>
                年龄<input type="number" v-model.number="userInfo.age"><br/>
                性别:
                男<input type="radio" name="sex" v-model='userInfo.sex' value="male"> 
                女<input type="radio" name="sex" v-model='userInfo.sex' value="female"><br/>
                爱好:
                    学习<input type="checkbox" v-model="userInfo.hobby" value="study"> 
                    打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
                    吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"><br/><br/>
                所属校区
                <select v-model="userInfo.city">
                    <option value="">请选择</option>
                    <option value="福州">福州</option>
                    <option value="厦门">厦门</option>
                    <option value="北京">北京</option>
                </select><br>
                其他信息<textarea v-model="userInfo.other"></textarea><br>
                阅读并接受<input type="checkbox" v-model.lazy="userInfo.agree"> <a href="https://www.baidu.com"><用户协议></a><br>
                <button >提交</button>
            </form>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip=false
            new Vue({
                el:'#root' ,
                data:{
                    userInfo:{
                        account:'',
                        password:'',
                        age:'',
                        sex:'female',
                        hobby:[],
                        city:'北京',
                        other:'aa',
                        agree:false,
                    }

                },
                methods:{
                    demo(){
                        console.log(JSON.stringify(this.userInfo))
                    }
                }

            })//创建实例

        </script>
    </body>
</html> 